import React from  'react'
import ReactDOM from 'react-dom'
import * as SysRoleMenuAction  from '../../actions/SysRoleMenuAction';
import { connect }  from 'react-redux';

import _ from 'lodash'

class SysRoleEdit extends React.Component {
  constructor(props){
    super(props)
    this.sysMenu;
    this.role_id = "";
  }

  componentDidMount() {
    this.props.dispatch(
      SysRoleMenuAction.loadSysRoleMenuDataAsync()
    )
  }

  componentWillReceiveProps(props) {
    if (props.sysMenu) {
      this.sysMenu = props.sysMenu
    }
    if (props.data) {
      if (props.data.id != this.role_id) {
        this.role_id = props.data.id
        this.props.dispatch(
          SysRoleMenuAction.loadSysRoleMenuByRoleAsync({
            role_id: props.data.id
          })
        )
      }
    }
  }

  componentDidUpdate() {
    // console.log(this.props.sysRoleMenu)
  }

  onLiClick(data){
    var self = this;
    this.props.dispatch(
      SysRoleMenuAction.createSysRoleMenuAsync({
        role_id: self.role_id,
        name: data.name,
        icon: data.icon,
        link: data.link
      })
    )
  }

  onDeleteClick(data) {
    var self = this;
    this.props.dispatch(
      SysRoleMenuAction.deleteSysRoleMenuAsync({
        id: data.id,
        role_id: self.role_id
      })
    )
  }


  renderList() {
    var self = this;
    var content = [];
    if (this.sysMenu) {
      var sysMenu = this.sysMenu;
      sysMenu.forEach(function(data, index) {
        content.push((
            <li onClick={(event)=> self.onLiClick(data)}>{data.name}</li>
        ))
      })
    }
    return content
  }

  renderAddMenu() {
    var self = this;
    var content = [];
    if (this.props.sysRoleMenu) {
      this.props.sysRoleMenu.forEach(function(data) {
        content.push((
          <tr>
            <td>{data.name}</td>
            <td><a onClick={(event)=>self.onDeleteClick(data)}>删除</a></td>
          </tr>
        ))
      })
    }
    return content;
  }


  render(){
    var self = this;

    return (
      <div className="modal fade" id="SysRoleMenuEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">角色菜单管理</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="role-url-permission">菜单名</label>
                <div className="dropdown">
                  <button className="btn btn-default dropdown-toggle" type="button" ref="roleUrlPermissionDown"
                          id='role-url-permission-down' data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
                    菜单名
                    <span className="caret"></span>
                  </button>
                  <ul ref="roleUrlPermission" id="role-url-permission"  className="dropdown-menu" aria-labelledby="role-url-permission">
                        {this.renderList()}
                  </ul>
                </div>
              </div>

              <div className="sys-role-url-permission">
                <table ref="permissionTable" className="table table-bordered">
                  <thead>
                    <tr>
                      <th>菜单名称</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {self.renderAddMenu()}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    sysMenu: state.sysMenu,
    sysRoleMenu: state.sysRoleMenu?state.sysRoleMenu.data:[]
  }
}

export default connect(mapStateToProps)(SysRoleEdit);
